import styled from "@emotion/styled";
import { Card } from "antd";

export const FlexContainer = styled.div`
  display: flex;
`;
/**
 * 公共flex
 */
export const BaseFlex = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;


/**
 * 公共flex-left
 */
export const BaseFlexLeft = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;

`;

/**
 * 左侧单位树
 */
export const LeftContainer = styled(Card)`
  margin-top: 16px !important;
  padding: 0 0.75rem;
  width: 18rem;
  background-color: #fff;
  min-height: calc(100vh - 10rem);
  margin-right: 0.75rem;
  overflow: auto;
  border-radius: 0;
`;

/**
 * 单位右侧布局
 */
export const RightContainer = styled.div`
  flex: 1;
  min-height: calc(100vh - 10rem);
`;
/**
 * 公共的card
 */
export const BaseContiner = styled.div`
  margin-top: 16px !important;
  display: block;
  background: #fff;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  position: relative;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding: 1rem;
`
/**
 * 表头布局
 */
export const TableHeader = styled(Card)`
  background-color: #fff;
  margin-bottom: 0.75rem;
  border-radius: 0;
`;

/**
 * 表布局
 */
export const TableContainer = styled(Card)`
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0;
`;

export const BaseContinerFlex = styled(BaseContiner)`
  display: flex;
  justify-content: center;
  align-items: center;
`;



export const CardHader = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
min-height: 25px;
margin-bottom: -1px;
padding: 10px 24px;
color: rgba(0, 0, 0, 0.88);
font-weight: 600;
font-size: 16px;
background: #fff;
border-bottom: 1px solid #e8eaec;
border-radius: 8px 8px 0 0;
`